<div class="layui-container" style="padding: 5%">
    <div class="layui-row">
        <div class="layui-col-lg8 layui-col-lg-offset2">
            <form class="layui-form" id="teacher-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">课程名</label>
                    <div class="layui-input-block">
                        <input type="text" name="courseName" autocomplete="off" lay-verify="courseName"
                               placeholder="请输入课程名"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">教师号</label>
                    <div class="layui-input-block">
                        <input type="text" name="teacherId" autocomplete="off" lay-verify="teacherId"
                               placeholder="请输入教师编号"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">学分</label>
                    <div class="layui-input-block">
                        <input type="text" name="credit" autocomplete="off" lay-verify="credit"
                               placeholder="请输入学分"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">人数</label>
                    <div class="layui-input-block">
                        <input type="text" name="number" id="number" autocomplete="off" lay-verify="number"
                               placeholder="请输入可选人数"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="demo1" id="sub-btn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    layui.use('form', function () {
        var form = layui.form;
        $(function () {
            form.render();
        })
        // 自定义验证规则
        form.verify({
            courseName: function (value) {
                if (value.length < 1) {
                    return '课程名不能为空！';
                }
            },
            teacherId: function (value) {
                if (validTeacherId(value) !== 0) {
                    return '教师编号错误！';
                }
            },
            credit: [
                /([0-9]\.[1-9])|([1-9]\.[0-9])/
                , "学分必须为小数！"
            ],
            nature: function (value) {
                if (value !== '0' && value !== '1') {
                    return '课程属性必须为 0 或 1！'
                }
            },
            number: [
                /[1-9][0-9]*/
                , "人数不能为 0！"
            ],
        });

        function validTeacherId(id) {
            let code = 0;
            $.ajax({
                url: '/teacher/list',
                type: "GET",
                data: {teacherId: id},
                dataType: "JSON",
                success: function (JSONResult) {
                    if (JSONResult.code === 0) {
                        code = 0;
                    } else {
                        code = 1;
                    }
                }
            });
            return code;
        }

        // 监听提交
        form.on('submit(demo1)', function () {
            // submit 提交事件
            let serialize = $("#teacher-form").serialize();
            $.ajax({
                url: '/course/add/1',
                type: "POST",
                data: serialize,
                dataType: "JSON",
                success: function (JSONResult) {
                    if (JSONResult.code === 0) {
                        layer.msg("添加成功！");
                    } else {
                        layer.msg("添加失败！");
                    }
                }
            });
            return false;
        });
    })
</script>